<template>
  <div class="no-scroll">
    <div class="icons-container">
    <!-- 星星元素 -->
    <div v-for="(icon, index) in icons" :key="index" :class="'icon icon'+index" :style="{ left: icon.left, top: icon.top, animationDelay: icon.delay }">
      <v-icon>{{ icon.type }}</v-icon>
    </div>
    </div>
  <AppNavigation></AppNavigation>
  <div>
    <v-img
      aspect-ratio="16/9"
      cover
      src="@/assets/social/welcome.png"
    ></v-img>
  </div>

  <div class="title-container">
    <h1 class="title">推荐的结果：</h1>
    <button class="button" @click="toggleSatisfaction">
      <span v-if="satisfied">😊</span>
      <span v-else>😠</span>
    </button>
  </div>

  <v-main>
    <v-container class="mt-1">
      <v-row id="work-list">
        <v-col offset="1">
          <v-list lines="three" min-height="50vh">
            <v-infinite-scroll height="65vh" :items="recommend_list" >
              <template v-for="(item, index) in recommend_list" :key="index">
                <v-list-item class="mt-4 w-75 card"  border :title="item.岗位" :subtitle="item.公司名称" rounded
                             @click="setJobItem(item)" @mouseenter="hoverIndex = index"
                             @mouseleave="hoverIndex = null">
                  <template v-slot:append>
                    <span>{{ item.salary }}</span>
                  </template>
                  <v-row id="work-list">
                    <v-col></v-col>
                  </v-row>
                  <v-row class="mt-5" align="center">
                    <v-col cols="2">
                      <v-avatar image="@/assets/index/avatar.jpg"  rounded></v-avatar>
                    </v-col>
                    <v-col>
                      <transition name="fade" cols="3">
                        <span class="contact">{{ item.hiring_manager }}</span>
                      </transition>
                    </v-col>
                    <v-col class="text-end" cols="5">
                      <transition name="fade">
                        <span class="location">{{ item.city }}</span>
                      </transition>
                    </v-col>
                  </v-row>
                </v-list-item>
              </template>
            </v-infinite-scroll>
          </v-list>
        </v-col>
        <v-col cols="6">
          <RouterView></RouterView>
        </v-col>
      </v-row>
    </v-container>
  </v-main>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import recommend_list from "@/store/recommend_list";
import job_item from "@/store/job_item";
import AppNavigation from "@/components/AppNavigation.vue";

const satisfied = ref(true);
const toggleSatisfaction = () => {
  satisfied.value = !satisfied.value;
};

// 点击卡片时设置 job_item
const setJobItem = (item) => {
  job_item.value = item;
};


// 星星图标数组，包含星星和星星轮廓
const icons = [
  { type: 'mdi-star', left: `${Math.random() * (window.innerWidth - 50)}px`, top: `${Math.random() * (window.innerHeight - 50)}px`, delay: `${Math.random() * 5}s` },
  { type: 'mdi-star-outline', left: `${Math.random() * (window.innerWidth - 50)}px`, top: `${Math.random() * (window.innerHeight - 50)}px`, delay: `${Math.random() * 5}s` },
  { type: 'mdi-star', left: `${Math.random() * (window.innerWidth - 50)}px`, top: `${Math.random() * (window.innerHeight - 50)}px`, delay: `${Math.random() * 5}s` },
  { type: 'mdi-star-outline', left: `${Math.random() * (window.innerWidth - 50)}px`, top: `${Math.random() * (window.innerHeight - 50)}px`, delay: `${Math.random() * 5}s` },
  { type: 'mdi-star', left: `${Math.random() * (window.innerWidth - 50)}px`, top: `${Math.random() * (window.innerHeight - 50)}px`, delay: `${Math.random() * 5}s` },
  { type: 'mdi-star-outline', left: `${Math.random() * (window.innerWidth - 50)}px`, top: `${Math.random() * (window.innerHeight - 50)}px`, delay: `${Math.random() * 5}s` },
  { type: 'mdi-star', left: `${Math.random() * (window.innerWidth - 50)}px`, top: `${Math.random() * (window.innerHeight - 50)}px`, delay: `${Math.random() * 5}s` },
  { type: 'mdi-star-outline', left: `${Math.random() * (window.innerWidth - 50)}px`, top: `${Math.random() * (window.innerHeight - 50)}px`, delay: `${Math.random() * 5}s` },
];


const items = ref([]);
const initialLoadCount = 10; // 设置初始加载数量
let startIndex = 0; // 记录当前加载数据的起始索引

// 初始化时加载初始数据
async function init() {
  const initialData = await api(); // 从 API 中获取初始数据
  loadItems(initialData); // 加载初始数据
}

// 模拟异步 API 调用
async function api() {
  return new Promise(resolve => {
    // 模拟返回的岗位数据...
    resolve(res);
  });
}

// 加载更多岗位数据
async function load({ done }) {
  // 执行 API 调用
  const res = await api();
  loadItems(res); // 加载数据
  // 通知滚动加载完成
  done('ok');
}

// 将数据添加到 items 中
function loadItems(data) {
  const endIndex = startIndex + initialLoadCount;
  items.value.push(...data.slice(startIndex, endIndex));
  startIndex = endIndex;
}

// 初始化时加载初始数据
init();

// 监听滚动事件
window.addEventListener('scroll', () => {
  const { scrollTop, clientHeight, scrollHeight } = document.documentElement;
  if (startIndex < 50 && scrollTop + clientHeight >= scrollHeight - 20) {
    // 在距离底部20像素时加载更多数据
    load({ done: () => {} }); // 加载数据
  }
});


const hoverIndex = ref(null);
</script>

<style scoped>
#work-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.card {
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s, box-shadow 0.3s;
}
.card:hover {
  color: rgb(255, 72, 0);
  transform: translateY(-5px);
  box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.2);
}

.v-avatar {
  width: 40px;
  height: 40px;
}

.contact, .location {
  transition: color 0.3s;
}

/* 图标样式 */
.icon {
  position: absolute;
  font-size: 30px; /* 减小星星的大小 */
  color: #ffd700; /* 星星黄色 */
  z-index: 999; /* 将图标置于最顶层 */
  animation: iconFall 8s linear infinite; /* 调整速度 */
  filter: drop-shadow(0 0 5px #ffd700) drop-shadow(0 0 5px #ffd700) drop-shadow(0 0 5px #ffd700); /* 添加发光效果 */
}


/* 图标下落的动画效果 */
@keyframes iconFall {
  0% {
    transform: translateY(-10%);
  }
  100% {
    transform: translateY(1000%); /* 页面底部 */
  }
}

.title-container {
  margin-top: 10px;
  display: flex;
  justify-content: space-between; /* 水平方向均匀分布 */
  align-items: center; /* 垂直方向居中对齐 */
}

.title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

.button {
  padding: 10px;
  background-color: transparent;
  border: none;
  cursor: pointer;
  transition: transform 0.3s;
}

.button:hover {
  transform: scale(1.1);
}

.no-scroll {
  overflow: hidden; /* 禁止滚动 */
}

.title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  /* 添加发光效果 */
  text-shadow: 0 0 5px #fff, 0 0 10px #ff0, 0 0 15px #f00, 0 0 20px #f00, 0 0 25px #f00, 0 0 30px #f00, 0 0 35px #f00;
  animation: glow 2s infinite linear;
}


@keyframes glow {
  0% {
    text-shadow: 0 0 5px #fff, 0 0 10px #ff0, 0 0 15px #f00, 0 0 20px #f00, 0 0 25px #f00, 0 0 30px #f00, 0 0 35px #f00;
  }
  50% {
    text-shadow: none;
  }
  100% {
    text-shadow: 0 0 5px #fff, 0 0 10px #ff0, 0 0 15px #f00, 0 0 20px #f00, 0 0 25px #f00, 0 0 30px #f00, 0 0 35px #f00;
  }
}


</style>
